<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>修改员工信息</title>
  <style>
    body {font-family:Arial,Helvetica,sans-serif; margin:20px;}
    label {display:block; margin:8px 0;}
    input, select {padding:4px 6px;}
    .msg {margin:10px 0; color:#d00;}
    .btn {padding:6px 12px; margin-top:12px;}
  </style>
</head>
<body>

<h1>修改员工信息</h1>

<!-- 错误/成功提示 -->
<div id="msg" class="msg"></div>

<!-- 表单（和 add.html 完全保持一致，只是多了一个 hidden 的 empno） -->
<form id="updateForm">
  <input type="hidden" name="empno" id="empno">

  员工编号: <input type="text" name="empno_disp" id="empno_disp" disabled><br>

  员工姓名: <input type="text" name="ename" id="ename"><br>
  员工职位: <input type="text" name="job" id="job"><br>
  员工经理编号: <input type="text" name="mgr" id="mgr"><br>
  员工入职时间: <input type="date" name="hiredate" id="hiredate"><br>
  员工薪资: <input type="text" name="sal" id="sal"><br>
  员工提成: <input type="text" name="comm" id="comm"><br>
  员工部门号: <input type="text" name="deptno" id="deptno"><br>

  <button type="submit" class="btn">提交修改</button>
  <button type="button" class="btn" id="cancelBtn">返回首页</button>
</form>

<!-- 引入 axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
  /*=====================================================================
     1️⃣ 读取 URL 参数（只需要 empno）
  =====================================================================*/
  function getQueryParam(name) {
    const params = new URLSearchParams(window.location.search);
    return params.get(name);
  }

  /*=====================================================================
     2️⃣ 根据 empno 请求单条记录
     假设后端接口是：GET /one?empno=7369
  =====================================================================*/
  function fetchOneEmployee(empno) {
    // 如果后端返回的结构与列表不同，请自行调整
    return axios.get('/list', { params: { empno } })
            .then(resp => {
              // 业务层约定：resp.data.code === 2000 为成功
              if (resp.data.code !== 2000) {
                throw new Error(resp.data.msg || '查询失败');
              }
              return resp.data.data;   // 这里是一个 employee 对象
            });
  }

  /*=====================================================================
     3️⃣ 把查询到的对象填充到表单里
  =====================================================================*/
  function fillForm(emp) {
    // 隐藏字段，真正用于提交
    document.getElementById('empno').value = emp.empno;
    // 只作展示的字段（不可编辑）
    document.getElementById('empno_disp').value = emp.empno;

    document.getElementById('ename').value   = emp.ename   ?? '';
    document.getElementById('job').value     = emp.job     ?? '';
    document.getElementById('mgr').value     = emp.mgr     ?? '';
    document.getElementById('hiredate').value= emp.hiredate?.split('T')[0] ?? '';
    document.getElementById('sal').value     = emp.sal     ?? '';
    document.getElementById('comm').value    = emp.comm    ?? '';
    document.getElementById('deptno').value  = emp.deptno  ?? '';
  }

  /*=====================================================================
     4️⃣ 提交表单（GET /update?empno=…&ename=…&…）
  =====================================================================*/
  function submitUpdate(formData) {
    // 这里我仍然使用 GET，保持和 add.html 的写法一致
    return axios.get('/update', { params: formData })
            .then(resp => {
              if (resp.data.code !== 2000) {
                throw new Error(resp.data.msg || '保存失败');
              }
              return resp.data;
            });
  }

  /*=====================================================================
     5️⃣ 页面加载完的主流程
  =====================================================================*/
  window.onload = function () {
    const empno = getQueryParam('empno');
    const msgBox = document.getElementById('msg');

    if (!empno) {
      msgBox.textContent = '错误：缺少 empno 参数';
      return;
    }

    // ① 读取原始数据
    fetchOneEmployee(empno)
            .then(emp => {
              fillForm(emp);
            })
            .catch(err => {
              console.error(err);
              msgBox.textContent = '加载失败：' + err.message;
            });

    // ② 绑定表单提交事件
    const form = document.getElementById('updateForm');
    form.addEventListener('submit', function (e) {
      e.preventDefault();          // 阻止默认 form submit（页面刷新）

      // 收集表单数据，排除 disabled / readonly 的字段
      const data = {
        empno: document.getElementById('empno').value,   // 必要的主键
        ename: document.getElementById('ename').value.trim(),
        job:   document.getElementById('job').value.trim(),
        mgr:   document.getElementById('mgr').value.trim(),
        hiredate: document.getElementById('hiredate').value,
        sal:   document.getElementById('sal').value.trim(),
        comm:  document.getElementById('comm').value.trim(),
        deptno:document.getElementById('deptno').value.trim()
      };

      // 简单的前端校验（可自行扩展）
      if (!data.ename) {
        msgBox.textContent = '姓名不能为空';
        return;
      }

      // ③ 发送更新请求
      submitUpdate(data)
              .then(() => {
                alert('修改成功！');
                // 直接回到首页（index.html），如果你想返回上一页可以 use history.back()
                window.location.href = '/index.html';
              })
              .catch(err => {
                console.error(err);
                msgBox.textContent = '保存失败：' + err.message;
              });
    });

    // ⑥ 取消按钮直接回首页
    document.getElementById('cancelBtn').addEventListener('click', () => {
      window.location.href = '/index.html';
    });
  };
</script>
</body>
</html>
